<template>
	<section class="search">
		<header class="header">
			<a class="header_title">
				<span class="header_title_text ellipsis">搜索</span>
			</a>
		</header>
		<form class="search_form" @submit.prevent="searchEvent">
			<input type="search" placeholder="请输入商家名称" class="search_input" v-model="keyword">
			<input type="submit" class="search_submit">
		</form>
		<section class="list" v-if="!searchFlag">
			<ul class="list_container">
				<router-link to="/shop/goods" tag="li" class="list_li" v-for="(item,index) in searchResult" :key="index">
					<section class="item_left">
						<img :src="imgBaseUrl + '164ad0b6a3917599.jpg'" class="restaurant_img">
					</section>
					<section class="item_right">
						<div class="item_right_text">
							<p>
								<span>{{searchResult.name}}</span>
							</p>
							<p>月售 {{item.float_minimum_order_amount}} 单</p>
							<p>{{item.float_minimum_order_amount}} 元起送 / 距离 {{item.distance}}</p>
						</div>
					</section>
				</router-link>
			</ul>
		</section>
		<section v-else>暂无搜索结果</section>
	</section>
</template>

<script>
	import {mapState} from 'vuex'
	import HeaderTop from '../../components/headerTop/index.vue'
	export default {
		name: 'Search',
		components: {
			HeaderTop
		},
		data(){
			return{
				keyword:'',
				imgBaseUrl: 'http://cangdu.org:8001/img/',
				searchFlag:false // 控制暂无搜索结果文字的显示与隐藏
			}
		},
		watch:{
			searchResult(val){
				if(val.length){ // 如果搜索有值返回
					this.searchFlag = false
				}else{ // 如果搜索没有值返回
					this.searchFlag = true
				}
			},
		},
		methods:{
			searchEvent(){
				if(this.keyword){
					this.$store.dispatch('REQGETSEARCHSHOP',this.keyword.trim())
				}
			}
		},
		computed:{
			...mapState(['searchResult'])
		}
	}
</script>




<style lang="stylus">
	@import "../../common/stylus/mixins.styl"
	.search
		width 100%
		height 100%
		overflow hidden
	.search_form
		clearFix()
		margin-top 45px
		background-color #fff
		padding 12px 8px
	input
		height 35px
		padding 0 4px
		border-radius 2px
		font-weight bold
		outline none
	&.search_input
		float left
		width 79%
		border 4px solid #f2f2f2
		font-size 14px
		color #333
		background-color #f2f2f2
	&.search_submit
		float right
		width 18%
		border 4px solid #02a774
		font-size 16px
		color #fff
		background-color #02a774
	.list
	.list_container
		background-color: #fff;
	.list_li
		display: flex;
		justify-content: center;
		padding: 10px
		border-bottom: 1px solid $bc;
	.item_left
		margin-right: 10px
	.restaurant_img
		width 50px
		height 50px
		display block
	.item_right
		font-size 12px
		flex 1
	.item_right_text
	p
		line-height 12px
		margin-bottom 6px
	&:last-child
		margin-bottom 0
	.search_none
		margin: 0 auto
		color: #333
		background-color: #fff
		text-align: center
		margin-top: 0.125rem
</style>


